<template>
  <div class="FlipClock" style="display: flex">
    <div v-for="i in num" :key="i" style="margin-right: 2px">
      <Flipper :ref="'fil' + i" :style="{ fontSize: string + 'px' }" />
    </div>
  </div>
</template>

<script>
import Flipper from "./Flipper";
export default {
  name: "FlipClock",
  data() {
    return {
      timer: null,
      flipObjs: [],
      nowNumStr: "",
      num: 0,
    };
  },
  props: {
    value: {
      type: Number|String,
      default: 0,
    },
    string:{
      type: Number|String,
      default: 20,
    },
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        this.init(newVal);
      },
      immediate: true,
      deep: true,
    },
  },
  components: {
    Flipper,
  },
  methods: {
    // 初始化数字
    init(nowNumStr) {
      this.nowNumStr = nowNumStr.toString();
      this.num = nowNumStr.toString().length;
      this.flipObjs = [];
      // console.log(this.nowNumStr);
      setTimeout(() => {
        for (let i = 0; i < this.num; i++) {
          this.flipObjs.push(this.$refs["fil" + [i + 1]][0]);

          this.$refs["fil" + [i + 1]][0].init(this.nowNumStr[i]);
        }
      }, 200);
      this.$emit("parkFlipFinish");
    },
    // 初始化数字_旧
    // init(nowNumStr) {
    //   this.nowNumStr = this.numToStr(nowNumStr);
    //   for (let i = 0; i < this.flipObjs.length; i++) {
    //     this.flipObjs[i].setFront(this.nowNumStr[i]);
    //   }
    //   this.$emit("parkFlipFinish");
    // },
    // 翻到 nextNum
    changeNum(nextNum) {
      // console.log(nextNum, "nextNum");

      let nowNum = Number(this.nowNumStr);
      this.flip(0, nextNum);
    },
    // 从 nowNum 翻到 nextNum
    flip(nowNum, nextNum) {
      let that = this;
      let beforeNum;
      let afterNum;

      beforeNum = nowNum;

      if (nowNum < nextNum) {
        afterNum = nowNum + 1;
        if (afterNum <= nextNum) {
          this.update(this.numToStr(beforeNum), this.numToStr(afterNum));
          this.timer = setInterval(() => {
            afterNum++;
            beforeNum++;
            // console.log(afterNum, nextNum);

            if (afterNum >= nextNum) {
              that.$emit("flipFinish");
              that.nowNumStr = that.numToStr(nextNum);
              that.update(that.numToStr(afterNum), that.numToStr(nextNum));
              clearInterval(that.timer);
            } else {
              that.update(that.numToStr(beforeNum), that.numToStr(afterNum));
            }
          }, 300);
        } else {
          that.$emit("flipFinish");
        }
      } else {
        afterNum = nowNum - 1;
        if (afterNum >= nextNum) {
          this.update(this.numToStr(beforeNum), this.numToStr(afterNum));
          this.timer = setInterval(() => {
            afterNum--;
            beforeNum--;
            if (afterNum < nextNum) {
              that.$emit("flipFinish");
              that.nowNumStr = that.numToStr(nextNum);
              clearInterval(that.timer);
            } else {
              that.update(that.numToStr(beforeNum), that.numToStr(afterNum));
            }
          }, 700);
        } else {
          that.$emit("flipFinish");
        }
      }
    },
    // 翻牌动作
    update(now, next) {
      // console.log(now, next);

      for (let i = 0; i < this.num; i++) {
        if (now[i] === next[i]) {
          continue;
        } else if (now[i] < next[i]) {
          this.flipObjs[i].flipDown(now[i], next[i]);
        } else {
          this.flipObjs[i].flipUp(now[i], next[i]);
        }
      }
    },
    // 数字转字符串，补上空缺
    numToStr(num) {
      let strNum = num.toString().padStart(this.num, "0");
      return strNum;
    },
  },

  mounted() {},
};
</script>

<style scoped>
.FlipClock {
  text-align: center;
}
/* .FlipClock .M-Flipper {
  margin: 0 3px;
} */
</style>
